<template>
    <div id="airConditioning">
      <ul>
        <li>
          <img src="../../assets/tu1.png" alt="" />
          <h5>{{ ahuNum }}</h5>
          <p>空调机组数量</p>
        </li>
        <li>
          <img src="../../assets/tu2.png" alt="" />
          <h5>{{ mauNum }}</h5>
          <p>新风机组数量</p>
        </li>
      </ul>
    </div>
  </template>
  <script scoped>
  export default {
    data() {
      return {
          ahuNum: 0, // 直梯数量
          mauNum: 0, //新风机组数量
      };
    },
    methods: {
      // 获取安防态势数据
      getstall() {
        stall()
          .then((res) => {
            console.log(res);
            this.ahuNum = res.data.一般告警;
            this.mauNum = res.data.紧急告警;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 自适应
      winSize() {
        var ratioY = window.innerHeight / 188;
        var ratioX = window.innerWidth / 370;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
        // this.getstall();
      },
    },
    mounted() {
      // this.getstall();
      this.winSize();
      window.onresize = () => {
        return (() => {
          var ratioX = window.innerWidth / 370;
          var ratioY = window.innerHeight / 188;
          window.document.body.style.transform = "scale(" + ratioY + ")";
          window.document.body.style.transformOrigin = "0px 0px";
        })();
      };
    },
  };
  </script>
  <style scoped lang="less">
  #airConditioning {
    display: flex;
  
    width: 370px;
    height: 170px;
    padding: 0.2rem 0.15rem;
    box-sizing: border-box;
  }
  
  ul {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
  }
  
  li {
    position: relative;
    text-align: center;
    color: #fff;
  }
  
  p {
    font-size: 14px;
    font-weight: bold;
  }
  
  img {
    width: 100px;
    height: 100px;
  }
  
  li h5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 38% 0;
    font-weight: 600;
    font-size: 22px;
  }
  </style>
  